<script setup>
import { ref } from 'vue';
import request from '@/utils/request'
import { Notify } from 'vant';
import 'vant/es/notify/style';
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'


const store = useStore()
const router = useRouter()

const username = ref('');
const password = ref('');

const onSubmit =async (values) => {
  // const {data} =await request.post('/user/login',{
  //     username:values.username,
  //     password:values.password
  // })

  const data = await store.dispatch('login',values)
  console.log('login',data)

  if (data.code === 200) {
      Notify({ type: 'success', message: '登录成功' })
      // 清空输入框
      username.value=''
      password.value=''

      // 将userId存入localStorage
      // localStorage.setItem("userInfo",data.data)

      // 跳转到我的中心
      router.replace('/mine')

    } else if (data.code === 400) {
      Notify({ type: 'danger', message: '登录失败' })
  }
};

const onClickLeft = () => history.back();

</script>
<template>
  <van-row>
    <van-button icon="cross" @click="onClickLeft" class="btn"></van-button>
  </van-row>
  <van-row>
    <van-col span="8"></van-col>
    <van-image width="100" height="100" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" />
  </van-row>
  <h3>登录</h3>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
    </van-cell-group>
    <van-row>
      <van-col span="15"></van-col>
      <van-button to="reg" class="btn">立即注册</van-button>
    </van-row>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        登录
      </van-button>
    </div>
  </van-form>


</template>
<style>
h3 {
  text-align: center;
}

.btn {
  border: none;
}
</style>